<template>
	<view>
		<!-- 搜索、添加 -->
		<view class="top">
			<view class="search left">
				<uni-search-bar radius="100" placeholder="搜索" cancelButton="none" bgColor="#E4E4E4">
					<template v-slot:searchIcon>
						<uni-icons color="#999999" size="18" type="" />
					</template>
				</uni-search-bar>
			</view>
			<view class="addBtn right">
				<image class="add" src="@/static/images/add.svg"></image>
			</view>
		</view>
		<!-- 左右滑动导航栏 -->
		<scroll-view scroll-x="true" class="scroll" show-scrollbar="false">
			<view class="slider" :class="isActive==index?'addClass':''" v-for="(item,index) in actcleCategroys"
				@click="onClick(index,item.acticleCategroyId)">
				<span>{{item.artcleCategroyName}}</span>
			</view>
		</scroll-view>
		<!-- 数据列表 -->
		<ul v-if="actcleDatas!=''?true:false">
			<li class="lis" v-for="(item,index) in actcleDatas" @click="getDetails(item.microcircleId,item.acticleCategroyId)">
				<view class="left">
					<image class="artcleImage" :src="item.artcleUrl"></image>
				</view>
				<view class="right lis-right">
					<h4 class="title">{{item.artcleTitle}}</h4>
					<p class="preface">前言：{{item.article}}</p>
					<view class="system">
						文章体系
						<text class="beTheSpeaker">
							主讲： {{item.nickname}}
						</text>
					</view>
				</view>
			</li>
		</ul>
		<view v-if="actcleDatas!=''?false:true" class="noRecord">
			<image class="recordImage" src="@/static/images/jilu.png"></image>
			<view class="noText">暂无数据</view>
		</view>
	</view>
</template>

<script>
	// 查询微圈分类
	import {
		getActicleCategroy
	} from '@/static/http/getData.js'
	// 查询微圈信息
	import {
		getMicrocircle
	} from '@/static/http/getData.js'
	export default {
		data() {
			return {
				// 微圈分类集合
				actcleCategroys: [],
				isActive: 0,
				// 微圈列表集合
				actcleDatas: [],
				// 微圈分类id
				acticleCategroyId: 0
			}
		},
		methods: {
			onClick: function(index, acticleCategroyId) {
				this.isActive = index
				//获取微圈信息
				this.getMicrocircle(acticleCategroyId);
			},
			//封装查询微圈的方法
			getMicrocircle(acticleCategroyId) {
				getMicrocircle({
					acticleCategroyId: acticleCategroyId
				}).then(res => {
					if (res.statusCode == 200) {
						this.actcleDatas = res.data.data;
					}
				})  
			},
			//微圈详情
			getDetails(microcircleId,acticleCategroyId) {
				uni.navigateTo({
					url: "/pages/microCircle/details?microcircleId=" + microcircleId + "&acticleCategroyId=" +
						acticleCategroyId
				})
			}
		},
		created() {
			getActicleCategroy().then(res => {
				if (res.statusCode == 200) {
					this.actcleCategroys = res.data.data;
					this.acticleCategroyId = this.actcleCategroys[0].acticleCategroyId;
					//设置微圈分类id
					var acticleCategroyId = this.acticleCategroyId;
					//查询微圈信息
					this.getMicrocircle(acticleCategroyId);
				}
			});
		}
	}
</script>

<style>
	* {
		margin: 0;
		padding: 0;
	}

	.left {
		float: left;
	}

	.right {
		float: right;
	}

	.top {
		height: 60px;
		background-color: #FEFEFE;
	}

	.search {
		width: 88%;
	}

	.addBtn {
		width: 9%;
		text-align: center;
		margin-top: 2.4%;
		margin-right: 3%;
	}

	.add {
		width: 40px;
		height: 40px;
	}

	.scroll {
		width: 100%;
		white-space: nowrap;
		border-bottom: 2px solid #E4E4E4;
	}

	.slider {
		display: inline-block;
		width: 80px;
		height: 30px;
		margin-left: 95px;
	}

	.addClass {
		color: #43C1A9;
	}

	ul li {
		list-style: none;
	}

	.lis {
		height: 100px;
		color: #9B9B9C;
		margin: 10px;
	}

	.artcleImage {
		width: 140px;
		height: 100px;
		border-radius: 17%;
	}

	.lis-right {
		width: calc(100% - 3% - 140px);
		margin-left: 3%;
	}

	.title {
		font-size: 26px;
		color: #000000;
	}

	.preface {
		width: 100%;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		font-size: 18px;
	}

	.system {
		font-size: 18px;
		margin-top: 4%;
		width: 100%;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.beTheSpeaker {
		margin-left: 8%;
	}

	.noRecord {
		text-align: center;
		margin-top: 40%;
	}

	.recordImage {
		width: 200px;
		height: 200px;
		color: #1ABC9C;
	}

	.noText {
		color: #999999;
		font-size: 20px;
	}
</style>
